
import { useDispatch, useSelector } from 'react-redux';
import { getList } from "@/store/reducers/article";
import _ from 'lodash';
import { useEffect, useState } from "react";
import type { AnyAction } from "@reduxjs/toolkit";
import { useLocation, useParams, useSearchParams } from 'react-router-dom';
import DynamicTable from '@/components/dynamicTable';

export default function Index() {
    const dispatch = useDispatch();
    //params
    const pId = useParams()?.id;
    // search
    const [search] = useSearchParams();
    const sId = search?.get('id');
    //state
    const location = useLocation();
    const state = location?.state;

 
    const [page,setPage] = useState(1);
    const [pageSize,setPageSize] = useState(10);
    const [tabLoading,setTabLoading] = useState(false);
    const [hasPadding,setHasPadding] = useState(false);
    
    
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
    ]
    const dataJ = [
        {
            id:0,
            name:'小红',
            age:10,
            address:'xxx'
        },
        {
            id:1,
            name:'小红1',
            age:11,
            address:'xxx'
        },
        {
            id:2,
            name:'小红2',
            age:12,
            address:'xxx'
        },
        {
            id:3,
            name:'小红3',
            age:13,
            address:'xxx'
        },
        {
            id:4,
            name:'小红4',
            age:14,
            address:'xxx'
        },
        {
            id:5,
            name:'小红5',
            age:15,
            address:'xxx'
        },
    ]
    const [tableData,setTableData] = useState({data:dataJ,page:1,pageSize:10,total:5});
    const getCheckList = (params={},page:number,pageSize:number) =>{
        let result:any = [];
        for(var i=0;i<=page*pageSize-5;i++){
            result.push({
                id:i+6,
                name:'小红'+(i+6),
                age:16+i,
                address:'xxx'
            })
        }
        setTabLoading(true)
        let resJSOn = {
            data:[...dataJ,...result],
            page,
            pageSize,
            total:[...dataJ,...result]?.length || 0,

        }
        setTableData({
            data:dataJ,
            page,
            pageSize,
            total:dataJ.length || 0,
        });
        setTimeout(()=>{
            setTableData(resJSOn);
            setTabLoading(false)
        },500)
    }
    useEffect(() => {
        dispatch(getList({ currentPage: 2, pageSize: 10}) as unknown as AnyAction);
        getCheckList({},page,pageSize)
        console.log(tableData,'====tableData')
    }, [page,pageSize])

    const { list, total } = useSelector((store: any) => store.article);

    return <>
        <section>
            <h3>测试路由传参</h3>
            <div>params:{pId}</div>
            <div>search:{sId}</div>
            <div>locathionState:{_.get(state,'id')}</div>
        </section>
        <section>
            <h3>测试异步 actions</h3>
            <div>total: {total}</div>
            <ul style={{ padding: 0 }}>list:
                {_.map(list, (item: number, key: number) => <li key={key}>{item}</li>)}
            </ul>
        </section>
        <section>
             <DynamicTable
                columns={columns}   
                // 注意data是一个数组 page是页码对象 参考组件要求
                tableData={tableData}
                hasPadding={false}
                loading={tabLoading}
                rowKey='id'
                turnPage={(page, pageSize) => {
                    console.log(page,pageSize,'----页码');
                    
                // 获取数据
                    getCheckList({}, page, pageSize);
                }}
                changeRoute={
                    (row:any)=>{
                        console.log(row,'=====单元格');
                        
                    }
                }
                scroll={{
                    y: 400,
                }}
            />
        </section>
    </>
}